<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/css/bootstrap.css">
  <link rel="stylesheet" href="../css/阿里百秀.css">
    <!-- 条件注释 满足一定条件的时候会执行   -->
      <!-- if lt IE 9  [less than] -->
     <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
        <!-- 做菜单开始 -->
        <div class="menu-left">
          <a href="#" class="logo"><img src="../images/logo.png" alt=""></a>
          <div class="menu-left-nav">
              <a href="#">📷生活馆</a>
              <a href="#">📷生活馆</a>
              <a href="#">📷生活馆</a>
              <a href="#">📷生活馆</a>
              <a href="#">📷生活馆</a>
          </div>
        </div>
      </div>
      <!-- 内容部分开始 -->
      <div class="col-sm-7">
        <div class="main-content clearfix">
          <div class="diyikuai">
            <a href="#">
              <img src="../upload/lg.png" alt="">
              <div class="baixiuziti">阿里百秀</div>
            </a>
            <div class="mayuntu">
            <a href="#"><img src="../upload/1.jpg" alt="">
              <div class="mayunziti">奇了成都一校区护卫长得像马云市区民纷纷求合影</div>
            </a>
            <a href="#"><img src="../upload/2.jpg" alt="">
              <div class="mayunziti">奇了成都一校区护卫长得像马云市区民纷纷求合影</div>
            </a>
            <a href="#"><img src="../upload/3.jpg" alt="">
              <div class="mayunziti">奇了成都一校区护卫长得像马云市区民纷纷求合影</div>
            </a>
            <a href="#"><img src="../upload/4.jpg" alt="">
              <div class="mayunziti">奇了成都一校区护卫长得像马云市区民纷纷求合影</div>
            </a>
            </div>
          </div>
          <!-- 生活馆开始 -->
          <div class="shenghuaguan">
            <div class="shenghuaguan1">
              <div class="row">
                <div class="col-sm-8">
                  <div class="shenghuaguan2">
                    <a href="#">
                      <span class="biaoti">生活馆 关于指甲的10个健康知识 你知道几个?</span>
                      <span class="fabushijian">alibaixiu发布于2015-11-23</span>
                      <span class="neirong">指甲人们经常忽略的身体部位,事实的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况</span>
                    </a>
                    <p class="dianzan">阅读(2417)评论(1)赞(18)标签: <a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a></p>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="youb">
                    <a href="#"><img src="../upload/1.jpg" alt=""></a>
                  </div>
                </div>
              </div>
            </div>
            <div class="shenghuaguan1">
              <div class="row">
                <div class="col-sm-8">
                  <div class="shenghuaguan2">
                    <a href="#">
                      <span class="biaoti">生活馆 关于指甲的10个健康知识 你知道几个?</span>
                      <span class="fabushijian">alibaixiu发布于2015-11-23</span>
                      <span class="neirong">指甲人们经常忽略的身体部位,事实的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况</span>
                    </a>
                    <p class="dianzan">阅读(2417)评论(1)赞(18)标签: <a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a></p>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="youb">
                    <a href="#"><img src="../upload/1.jpg" alt=""></a>
                  </div>
                </div>
              </div>
            </div>
            <div class="shenghuaguan1">
              <div class="row">
                <div class="col-sm-8">
                  <div class="shenghuaguan2">
                    <a href="#">
                      <span class="biaoti">生活馆 关于指甲的10个健康知识 你知道几个?</span>
                      <span class="fabushijian">alibaixiu发布于2015-11-23</span>
                      <span class="neirong">指甲人们经常忽略的身体部位,事实的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况</span>
                    </a>
                    <p class="dianzan">阅读(2417)评论(1)赞(18)标签: <a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a></p>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="youb">
                    <a href="#"><img src="../upload/1.jpg" alt=""></a>
                  </div>
                </div>
              </div>
            </div>
            <div class="shenghuaguan1">
              <div class="row">
                <div class="col-sm-8">
                  <div class="shenghuaguan2">
                    <a href="#">
                      <span class="biaoti">生活馆 关于指甲的10个健康知识 你知道几个?</span>
                      <span class="fabushijian">alibaixiu发布于2015-11-23</span>
                      <span class="neirong">指甲人们经常忽略的身体部位,事实的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况</span>
                    </a>
                    <p class="dianzan">阅读(2417)评论(1)赞(18)标签: <a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a></p>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="youb">
                    <a href="#"><img src="../upload/1.jpg" alt=""></a>
                  </div>
                </div>
              </div>
            </div>
            <div class="shenghuaguan1">
              <div class="row">
                <div class="col-lg-8">
                  <div class="shenghuaguan2">
                    <a href="#">
                      <span class="biaoti">生活馆 关于指甲的10个健康知识 你知道几个?</span>
                      <span class="fabushijian">alibaixiu发布于2015-11-23</span>
                      <span class="neirong">指甲人们经常忽略的身体部位,事实的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况</span>
                    </a>
                    <p class="dianzan">阅读(2417)评论(1)赞(18)标签: <a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a></p>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="youb">
                    <a href="#"><img src="../upload/1.jpg" alt=""></a>
                  </div>
                </div>
              </div>
            </div>
            <div class="shenghuaguan1">
              <div class="row">
                <div class="col-lg-8">
                  <div class="shenghuaguan2">
                    <a href="#">
                      <span class="biaoti">生活馆 关于指甲的10个健康知识 你知道几个?</span>
                      <span class="fabushijian">alibaixiu发布于2015-11-23</span>
                      <span class="neirong">指甲人们经常忽略的身体部位,事实的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况指甲是经常被人们经常忽略的身体部位,事实上从指甲的健康状况</span>
                    </a>
                    <p class="dianzan">阅读(2417)评论(1)赞(18)标签: <a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a>/<a href="#">健康</a></p>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="youb">
                    <a href="#"><img src="../upload/1.jpg" alt=""></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右列表开始 -->
      <div class="col-sm-3">
        <div class="lianmeng">
          <div class="right-img"><img src="../upload/zgboke.jpg" alt=""></div>
          <div class="right-img1">
            <a href="#">
                <span>热搜</span>
                <h4>欢迎加入中国博客联盟</h4>
                <p>这里收入国内各个领域的优秀博客,是一个全人工编辑的开放式博客联......</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="../lib/js/bootstrap.js"></script>
  <script src="../lib/js/jquery.js"></script>
</body>
<script>
  whatScreen();
  window.onresize = function () {
    whatScreen();
  }
  function whatScreen() {
    var width = document.documentElement.offsetWidth;
    var title = document.querySelector("title");
    if (width <= 768) {
      title.innerHTML = "极小屏幕-" + width;
    } else if (width > 768 && width <= 992) {
      title.innerHTML = "小屏幕-" + width;
    } else if (width > 992 && width <= 1200) {
      title.innerHTML = "普通屏幕-" + width;
    } else if (width > 1200) {
      title.innerHTML = "大屏幕-" + width;
    }
  }
</script>
</html>